The Photoshop Guru's Handbook - "Creating the NUI" Part 3 - 2D & 3D (inDepth Interface project) Setting Text - Making it readable Page 6b ![]() Well now, what to put behind this text... hmmm... This again is a very subjective thing. It all depends on what you feel will sovle the text problem, without detracting from your interface's look or style. Me... i'd just say 'simple, go ahead and throw a more solid background behind it. No point in debating the issue with yourself.' :?)=) But i know that's not the answer you were hoping for is it? No... i didn't think so. Alright then, let's try this... First i created my text. Then, i thought about what kinds of shapes were being used to create the overall look of the interface. That's the first thing i'll consider when i'm faced with having to create something for my interface that i didn't 'plan' on adding to it. And that's when it hit me... i'll just create a solid coloured area behind the text that is the same shape as the entire body is. Simple, cohesive, works for me! I filled the shape with black to begin with. Then, because it was too blunt, and didn't fit in with the 'look' i wanted, i decided to apply a black to white Linear gradient to the shape instead, because i wanted the the text area to have a sort of cut-out effect. I liked the gradient, but the greys didn't cut it for me. So... i started trying different Blend modes to see if any of them gave the shape some characteristics that suited the interface's design, and blended in to the texture. There are various Blend modes that will produce this effect, but since the interface alreay had a very shiny, solid quality about it, that's what i was trying to make the cut-out look like also. And low-and-behold, i found that Hardlight mode looked good to me. The only thing was, that it was quite a high contrast effect, and still made some of the words unreadable. So... thinking fast, i pulled an old trick out of my hat and just Duplicated the layer, Flipped it vertically, and set the duplicate layer to Multiply mode. That effectively solved the problem. But it also dulled most of the shine that Hardlight had given the cut-out. So... not liking that effect, i tried a different Blend mode for the bottom gradient layer that was on Hardlight. The first one i tried, i liked. It was my old friend, Exclusion (i love that mode). ![]() Exclusion mode gave my text background a photo-negative type of effect. And it suited well with the interface's look. And more important, my text became a lot more readable. That sparked an idea for me so i switched the top gradient layer to Hardlight instead of Multiply. I did that because using Exclusion mode on the bottom layer made the top part of the background disappear. (The above image) Using Hardlight mode on the top gradient layer made it visible again. (does the word EXPERIMENT come to mind here? - hint hint) :?)=) So now that my text was fairly readable again, i noticed that i'd lost all my cut-out effect. But that was easy enough to fix; and in fact, i was going to fix it even better than i'd originally planned. I created a New layer above both gradient layers. Then i Ctrl+clicked one of the gradient layers to select it's shape. I made my foreground colour white, and stroked the selection by 3 pixels in the center of the selection. Then, to create my beveled cut-out effect, i simply applied a black to white Linear gradient to the white outline. Before i did that though, i clicked the layer's 'Preserve Transparency' box to protect the transparent areas of the layer. To make this bevel take on the same look as, and become part of the interface texture, i left this layer Normal mode but dropped it's Opacity down to 75%. And i didn't deselect yet either, because i still needed to do one more step using that selection. To excentuate the sunken-in effect even more, i created an inner shadow effect for the text area background. I created another New layer above the beveled layer, and changed my foreground colour to black for the shadow. Then i stroked my selection 3 pixels on the inside, and blurred the outline by .5 pixels. I left this layer on Normal mode. Then i deselected. Ok so now... i had a text area background i was happy with. But the text still wasn't quite as readable as it should be. So i fixed that real quick by just Duplicating the text layer, dragging the duplicate below the original text layer, and pressing Ctrl+i to change the white text to black. Then i selected the Move tool and hit my down arrow key 1x to nudge the shadow down 1 pixel. Unfortunately creating a shadow layer for the text only partially made it more readable. It was still a bit faint along the edges and the top. Simple solution here... duplicate the shadow layer. Done. ;) Now my text was readable enough to allow me to change it's colour. So i chose a light yellow. And that's the end. Problem solved. Project finished. BUT!... Then i decided to be a smarty-pants and mess it all up again, and make the text appear to be behind a plastic or glass cover, and just a liiiittle bit harder to read... sooooo... all i did for that was to drag all the text layers down the layers palette so they were all in between the two gradient layers. The fact that the top gradient is set to Hardlight mode is what creates the effect. And here, with the addition of a drop shadow, is my 'sort-of' final effect. It's a little rough around the edges still (so-to-speak), but it'll do in a pinch. ;) ![]() And so, the saga continues... Well i hope i was able to supply some helpful information here folks. And i hope you enjoyed it and try to be patient with yourselves if this stuff is new to you. And try to be patient with me also while i do what i can to fit more tutorials in to my hectic schedule. I don't mind saying here either... i REALLY need to train my fingers better so they don't just take off on me and continue typing & typing, even in my sleep! {:?)=) Buttons / Texture Mapping / Adding Text > To the Top < > Back to "2D & 3D" < - Page 6b - |
"The Photoshop Guru's Handbook" ™ and all contents of this site are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved. |